<template>
  <div>

    <!-- table 表格区域 -->
    <el-table :data="goodslist" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="姓名" prop="authName"></el-table-column>
      <el-table-column label="电话" prop="mobile"></el-table-column>
      
      
      <el-table-column label="活币数量" prop="money">

      </el-table-column>

      <el-table-column label="昵称" prop="nickName"></el-table-column>
      
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.pagenum"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="queryinfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询参数
      queryinfo: {
        pageNo: 1,
        pageSize: 20,
      },
      // 商品列表数据，默认为空
      goodslist: [],
      // 总数据条数
      total: 0,
      
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
  
    // 根据查询参数获取商品列表
    async getGoodsList() {
      // let params={
      //   "pageNo": this.queryinfo.pagenum,
      //   "pageSize": this.queryinfo.pagesize
      // }
      const { data: res } = await this.$http.post(
        "/manage/userCoin/huoBiNum",
        this.queryinfo
      ); //, { params: this.queryinfo }

      console.log(res);
      this.goodslist = res.data.list;
      this.total = res.data.total;
    },
    // 监听 pageSize 的变化，并立即获取最新的数据
    handleSizeChange(newSize) {
      this.queryinfo.pageSize = newSize;
      this.getGoodsList();
    },
    // 监听 pageNum 的变化，并立即获取最新的数据
    handleCurrentChange(newPage) {
      this.queryinfo.pageNo = newPage;
      this.getGoodsList();
    },
    
  },
  // 过滤器
  filters: {
    // 格式化时间的过滤器
    /* dateFormat(originVal) {
      const dt = new Date(originVal)
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1).toString().padStart(2, '0')
      const d = dt
        .getDate()
        .toString()
        .padStart(2, '0')

      const hh = dt
        .getHours()
        .toString()
        .padStart(2, '0')
      const mm = dt
        .getMinutes()
        .toString()
        .padStart(2, '0')
      const ss = dt
        .getSeconds()
        .toString()
        .padStart(2, '0')

      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    } */
  },
};
</script>

<style lang="less" scoped>
.base-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 16px;
}
.name-color {
  color: #666666;
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.base-border {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #eeeeee;
}
</style>
